<template>
    <div class="home-tab" @click="toHome('/xfjc/index/home')" :class="{show:useStore.homeIsShow}">
        <el-icon class="hicon" ><HomeFilled /></el-icon>
    </div>
    <div class="other-tabs" :class="{show:useStore.otherIsShow}">
        <div class="sub-tab" v-for="(item,i) in useStore.subTabList" :key="item.PATH" :item="item"
        :class="{active:useStore.activePath === item.PATH ? true : false}"
        >
            <el-icon @click="closeSubTab(item,i)"><CloseBold /></el-icon>
            <div class="sub-title" @click="goPage(item.PATH)" @mouseenter="showTipBox(item.PATH)">
                {{ item.TITLE }}                
            </div>   
            <div class="tip-box" :class="{show:tipBoxShow}" @mouseleave="noShowTipBox">
                <div class="content">
                    <div class="pointed"></div>
                    <div class="refresh-box">
                        <el-icon size="14"><Refresh /></el-icon>
                        <!-- <span class="tip-tit" @click="refresh(Date.now())">刷新</span> -->
                        <span class="tip-tit" @click="refresh(route.fullPath)">刷新</span>
                    </div>
                    <span class="separate">|</span>
                    <div class="collect-box">
                        <el-icon size="14"><Star /></el-icon>
                        <span class="tip-tit" @click="toggleCollect(item,useStore.ucStatus)">{{ useStore.ucStatus ? "取消收藏" : "收藏"}}</span>
                    </div>
                </div>
            </div>                                 
        </div> 
    </div>
    <div class="control-box" >
        <el-icon @click="toggleCotrolBoxShow"><MoreFilled /></el-icon>
        <transition name="el-zoom-in-left">
        <div v-show="controlBoxShow" class="close-box" @mouseleave="hideCloseBox">
            <div class="close-all son" @click="clearTabs">关闭全部</div>
            <div class="colse-other son" @click="clearOtherTabs(route.fullPath)">关闭其他</div>
            <div class="refresh son" @click="refresh(route.fullPath)">刷新当前组件</div>
        </div>
        </transition>
    </div>
</template>

<script setup>
import {ref } from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {mainStore} from '@/stores/store'
import {editCollect} from '@/utils/api'
import {isCollectFunc} from '@/utils/isCollect'
import {getUserCollect} from '@/utils/api'
import {msgOpen} from '@/utils/msg'

let router = useRouter()
let route = useRoute()
let useStore = mainStore()

let controlBoxShow = ref(false)
let isCollect = ref(false) //展示用户是否对其有进行收藏
let tipBoxShow = ref(false) //tip-box展示变量

//展示隐藏tipbox
/**
 * 展示tipbox
 * @param {String} path 当前激活的路由
 */
const showTipBox = (path)=>{
    if(useStore.activePath === path) tipBoxShow.value = true
}
const noShowTipBox = ()=>{
    tipBoxShow.value = false
}

/**
 * 切换收藏
 * data {Object} 组件信息对象
 * status {Boolean} 收藏状态
 */
const toggleCollect = async (data,status)=>{
    console.log(data,status)
    let changeCollect = await editCollect(data,status)
    // console.log(changeCollect)
    msgOpen(changeCollect.msg,"success")
    let userCollectInfo = await getUserCollect(data.PERSONID)
    useStore.setUserCollect(userCollectInfo.resDatas.userCollect)
    console.log(useStore.userCollect) 
    isCollect.value = isCollectFunc(useStore.activePath,useStore.userCollect)
    useStore.setUcStatus(isCollect.value)
    console.log(changeCollect) 
}

//当前激活的路由
useStore.activePath = route.fullPath

//返回首页
let toHome = (path)=>{
    if(!useStore.homeIsShow){
        useStore.toggleHomeShow(path)
        useStore.activePath = path        
    }    
}

//关闭单个subtab标签
const closeSubTab = (item,index)=>{ 
    let oldTabLen =  useStore.subTabList.length //关闭前的长度   
    let oldActivePath = useStore.activePath //关闭前的path
    let tabLen = useStore.subTabList.length //关闭后的长度
    if(useStore.activePath === item.PATH){//当前激活的tab
        if(oldTabLen > 1 && oldTabLen === index+1){//tab有多个，关闭最后一个
            refresh(item.PATH) 
            useStore.closeSubTab(index)
            useStore.activePath = useStore.subTabList[index-1].PATH //关闭后显示最后一个tab
            isCollect.value = isCollectFunc(useStore.activePath,useStore.userCollect)
            useStore.setUcStatus(isCollect.value)                       
            router.push(useStore.activePath)
        }
        if(oldTabLen > 1 && oldTabLen > index+1){//tab有多个，关闭非最后一个
            refresh(item.PATH) 
            useStore.closeSubTab(index)
            //关闭第一个显示第一个、关闭非最后一个显示最后一个tab
            useStore.activePath = useStore.subTabList[index].PATH 
            isCollect.value = isCollectFunc(useStore.activePath,useStore.userCollect)
            useStore.setUcStatus(isCollect.value)                       
            router.push(useStore.activePath)
        }
        if(oldTabLen === 1 && !index){           
            //关闭最后一个，则显示home
            refresh(item.PATH) 
            useStore.setActivePath('/xfjc/index/home')
            useStore.toggleHomeShow('/xfjc/index/home')            
            useStore.closeSubTab(index)            
            // router.push('/xfjc/index')  // ‘/xfjc/index’为固定值没有reloadKey不是linksRoutes内的元素，重新添加TAB后，再点击home就会报错
        }

    }else{//非当前激活tab
        if(tabLen){//关闭非最后一个
            refresh(item.PATH) 
            useStore.activePath = oldActivePath  
            useStore.closeSubTab(index)          
        }else{//关闭最后一个，则显示home
            refresh(item.PATH) 
            useStore.activePath = '/xfjc/index/home'
            useStore.toggleHomeShow('/xfjc/index/home')
            refreshAll()          
        }
    }

}

//点击tag跳转
const goPage = (path)=>{        
    // useStore.activePath = path
    useStore.setActivePath(path)
    isCollect.value = isCollectFunc(path,useStore.userCollect)
    useStore.setUcStatus(isCollect.value)
    useStore.toggleHomeShow(useStore.activePath)
    router.push(useStore.activePath)
}

//切换显示tabde control-box
const toggleCotrolBoxShow = ()=>{
    controlBoxShow.value = !controlBoxShow.value
}
const hideCloseBox = ()=>{
    if(controlBoxShow.value) controlBoxShow.value = false
}

//关闭全部tab
const clearTabs = ()=>{
    refreshAll()
    useStore.clearAllSubTabList()
    useStore.toggleHomeShow('/xfjc/index/home')
    controlBoxShow.value = false
    useStore.setActivePath('/xfjc/index/home')
    // router.push('/xfjc/index')  // ‘/xfjc/index’为固定值没有reloadKey不是linksRoutes内的元素，重新添加TAB后，再点击home就会报错
}

//关闭其他tab
const clearOtherTabs = (path)=>{    
    if(path === '/xfjc/index/home'){
        useStore.clearAllSubTabList()
        useStore.toggleHomeShow('/xfjc/index/home')
        useStore.setActivePath(path)
        controlBoxShow.value = false
        refreshAll()
    }else{      
        //当显示为Home，则关闭全部tab，否则只关闭非激活tab
        useStore.homeIsShow ? useStore.clearAllSubTabList() : useStore.clearOtherSubTabList(path)
        controlBoxShow.value = false
        useStore.homeIsShow ? refreshAll() : refreshOther(path)
    }
}

/**
 * refresh组件重载
 * 点击刷新时：reloadKey 自增 → Key 变化 → 强制重新创建组件
 * 切换 Tab 时：Key 基于缓存中的旧值 → KeepAlive 复用缓存实例
 * @param {String} path 当前路由path
 */
const refresh = (path)=>{  
    if (path === useStore.activePath) {
        // 仅修改当前 Tab 的 reloadKey
        useStore.linksRoutes.find(t => {
            if(t.path === path) t.meta.reLoadKey += 1
        })      
    } 
}

/**
 * 关闭所有Tab时，修改所有Tab的reloadKey，否则重新创建Tab时会报错
 * TypeError: parentComponent.ctx.deactivate is not a function
*/
const refreshAll = ()=>{  
    // 修改当前 所有Tab 的 reloadKey
    useStore.linksRoutes.forEach(t => {
        t.meta.reLoadKey += 1
    })      
}

/**
 * 关闭其他Tab时，修改其他Tab的reloadKey，否则重新创建Tab时会报错
 * TypeError: parentComponent.ctx.deactivate is not a function
 * @param {String} path 当前路由path
 */
const refreshOther = (path)=>{  
    if (path !== useStore.activePath) {
        // 仅修改当前 Tab 的 reloadKey
        useStore.linksRoutes.find(t => {
            if(t.path !== path) t.meta.reLoadKey += 1
        })      
    } 
}

</script>

<style lang="less" scoped>
    .home-tab,.control-box{
        height: 100%;
        border-right: #d9e1f1 solid .0625rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-icon{
            font-size: 1.25rem;
            color: #3f77ee;
        }
        .el-icon:hover{
            cursor: pointer;
        }
    }
    .home-tab{
        width: 3%;        
    }
    .other-tabs{
        height: 100%;
        width: 95%;
        // overflow: hidden;
        border-right: #d9e1f1 solid .0625rem;
        display: flex;
        align-items: center;
        position: relative;
        .sub-tab{
            // opacity: 0; 
            height: 100%;
            width: 10%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            border-right: #d9e1f1 solid .0625rem;
            .el-icon,.sub-title{
                font-size: .75rem;
                color: #3f77ee;
            }
            .el-icon:hover,.sub-title:hover{
                cursor: pointer;
                color: #101011;                
            } 
            .tip-box{
                display: none;
            }          
        }
        .sub-tab.active{
            // opacity: 1;
            width: 10%;
            background-color: #509ee7;
            position: relative;
            z-index: 30;
            .el-icon,.sub-title{
                color: #fff;
            }
            .el-icon:hover,.sub-title:hover{
                cursor: pointer;
                color: #101011;
            }   
            .tip-box.show {
                display: block;
                position: absolute;
                top: 2.5rem;
                width: 11.25rem;
                height: 1.875rem;
                background-color: rgba(42, 135, 211, 0.8);
                // border: #000 solid .0625rem;
                border-radius: .3125rem;
                z-index: 40;
                .content{
                    height: 100%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    position: relative;
                    .pointed{
                        position: absolute;
                        top: -0.625rem;
                        height:.625rem;
                        width: .625rem;
                        background-color:rgba(42, 135, 211, 0.8);
                        clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 使用clip-path创建三角形 */
                    }
                    .refresh-box,.collect-box{
                        height: 100%;
                        width: 49%;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        .el-icon{
                            height: 100%;
                            width: 30%;
                        }
                        .tip-tit{
                            height: 100%;
                            width: 70%;
                            font-size: .625rem;
                            color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .tip-tit:hover{
                            cursor: pointer;
                            color: #101011;
                        }
                    }
                    .separate{
                        height: 100%;
                        width: 2%;
                        color: #fff;
                        text-align: center;
                        // line-height: 100%;
                    }                    
                }
            }           
        }     
        
    }
    .control-box{
        width: 2%;
        position: relative;
        .el-icon:hover{
            color: #101011;
        }
        .close-box{
            height: 4.6875rem;
            width: 6.25rem;
            border: #165bf0 solid .0625rem;
            background-color: #fff;
            position: absolute;
            top: 1.625rem;
            right: 1.625rem;
            z-index: 50;
            .son {
                height: 33%;
                line-height: 100%;
                display: flex;
                align-items: center;
                /* 垂直居中 */
                justify-content: center;
                font-size: .75rem;
                color: #165bf0;
                z-index: 10;
            }

            .son:hover {
                background-color: #5084f5;
                color: #fff;
                cursor: pointer;
            }
        }
    }
</style>